<template>
  <div class="search-box">
    <div class="city">西安</div>
    <div class="search-input">
      <img src="../assets/logo.png" class="search-img" >
      <span class="shu">丨</span>
      <span class="iconfont icon-fangdajing"></span>
      <input type="text" class="input-s" placeholder="立柜式冰箱" @click="GoSearch">
    </div>
    <div class="login">登录</div>
  </div>
</template>

<script>

export default {
   name:"SearchVue",
   methods:{
    GoSearch(){
      this.$router.push("/Searchpro")
    }
   }
}
</script>

<style scoped>
      
    @import url(../assets/iconfonts/iconfont.css);

.search-box{
    width: 100%;
    height: 3.125rem;
    display: flex;
    justify-content: space-around;
    background:linear-gradient(to right,orange,red);
    align-items: center;
    color: white;
}
/* .search-box div{

} */
.city,.login{
  width: 3.75rem;
  height:100%;
  line-height: 3.125rem;
  text-align: center;
}
.search-input{
  flex: 1;
  /* height: 2.25rem; */
  text-align: center;
  position: relative;
}
.input-s{
  height: 2.25rem;
  width: 100%;
  border-radius: .9375rem;
  border: none;
  text-align: center;
}
.search-img{
  position: absolute;
  top: .3125rem;
  left: .625rem
}
.icon-fangdajing{
  position: absolute;
  color: gray;
  font-size:1.5rem;
  top: .3125rem;
  left:3.75rem;
}
.shu{
  font-size:20px;
  color: gray;
  display: block;
  position: absolute;
  top: .3125rem;
  left:2.875rem;
}
</style>

